<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>JQuery.Spreadsheet UI</title>

        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/ui.base.js"></script>
        <script src="js/ui.draggable.js"></script>

        <script type="text/javascript" src="js/jquery.textbox.js"></script>
        <script type="text/javascript" src="js/jquery.tableresizer.js"></script>
        <script type="text/javascript" src="js/jquery.spreadsheet.js"></script>

        <style type="text/css">
        
            @import "css/jquery.textbox.css";
            @import "css/jquery.spreadsheet.css";

            * { 
                margin:         0px;
                padding:        0px;
                font:           11px sans-serif;            }
    
            ul.project { 
                margin-left:    30px;                       }

            h1 { 
                font:           24px sans-serif;            }

            h2 {
                margin-top:     30px;
                font:           bold 16px sans-serif;       }              

            hr { 
                margin-bottom:  4px;                        }

            p {
                margin:         10px 0px;                   }

            #container { 
                padding:        20px;
                background:     #FFF;
                width:          600px;
                margin:         0px auto;                  }
                
            .spreadsheet { height: 400px; }

        </style>

        <script type="text/javascript">
            $(function()
            {
                $("#hn").spreadsheet();
                $("#hn").spreadsheet("setWidth","b",200);
                $("#hn").spreadsheet("setHeight","2",30);
                $("#hn").spreadsheet("setValue","c5","foo");
                $("#hn").spreadsheet("setStyle","c5","font-style","italic");
                $("#hn").spreadsheet("addName","b2:c3","newRange");
                $("#hn").spreadsheet("addFunction","MATHS","ABS","=ABS(number)");
                $("#hn").spreadsheet("addFunction","MATHS","ACOS","=ACOS(number)");
                $("#hn").spreadsheet("addFunction","MATHS","ASIN","=ASIN(number)");
                $("#hn").spreadsheet("addFunction","LOGICAL","AND","=AND(value1,value2,...)");
                $("#hn").spreadsheet("addFunction","LOGICAL","FALSE","=FALSE()");
            });
        </script>

    </head>

    <body>

        <div id="container">
         
            <h1>JQuery.Spreadsheet UI</h1>
            <hr />
            
            <h2>Introduction</h2>
            <p>A plugin to the JQuery library that provides a spreadsheet like
            user interface</p>
            
            <h2>Project</h2>
            <ul class="project">
                <li><p>Google Code: <a href="http://code.google.com/p/jqueryspreadsheet/">
                    http://code.google.com/p/jqueryspreadsheet/</a></p></li>
                <li><p>Author: Dale Harvey (harveyd@gmail.com)</p></li>
                <li><p>Tested Browsers: Firefox 2/3, IE 7/8, Epiphony 2, 
                    Opera 9, Safari 3</p></li>
                <li><p>Notes : Opera shows no scrollbars, IE8 is really slow</p></li>
            </ul>
                    
            <h2>Example</h2><br />
            <pre>
$(function()
{
    $("#hn").spreadsheet();
    $("#hn").spreadsheet("setWidth","b",200);
    $("#hn").spreadsheet("setHeight","2",30);
    $("#hn").spreadsheet("setValue","c5","foo");
    $("#hn").spreadsheet("setStyle","c5","font-style","italic");
    $("#hn").spreadsheet("addName","b2:c3","newRange");
    $("#hn").spreadsheet("addFunction","MATHS","ABS","=ABS(number)");
});
            </pre>
            
            <p>or try it <a href="fullscreen.html">fullscreen</a></p>
            
            <div id="hn"></div>

        </div>     
        
    </body>

</html>
